<script setup>
import { defineProps } from 'vue'

defineProps({
  text: {
    type: String,
    required: true
  },
  extraClass: {
    type: String,
    default: ''
  }
})
</script>

<template>
  <button class="btn-login" :class="extraClass">{{ text }}</button>
</template>

<style lang="scss" scoped>
@import '@/assets/scss/abstracts/variables';
.btn-login {
  padding: 1rem;
  background-color: $color-grey-dark-2;
  border: none;
  border-radius: 5rem;
  transition: all 0.3s;
  color: $color-white;
  letter-spacing: 2px;

  cursor: pointer;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 1rem 1rem rgba($color-primary-dark, 0.2);
  }

  &:focus {
    outline: none;
    transform: translateY(-1px);
    box-shadow: 0 0.5rem 0.5rem rgba($color-primary-dark, 0.2);
  }
}
</style>
